import React, { useMemo, useState } from 'react';
import { ConfigProvider, theme, App as AntdApp } from 'antd';
import { RootApplication, RootContextApi } from "./config/application";
import { LibAppView as AppView } from "./lib";
import locale from 'antd/es/locale/zh_CN';
import i18nData from "./i18n";
import "./App.css";
import 'react-quill/dist/quill.snow.css';


function App() {
    const [ radiusProps ] = useState({
        borderRadius: 3
    });
    const [ themeValue, setTheme ] = useState(() => {
        return localStorage.getItem("theme") ?? "light"
    });
    const themeAlgorithm = useMemo(() => {
        return themeValue === "dark" ? theme.darkAlgorithm : theme.compactAlgorithm;
    }, [themeValue]);
    
    return (
        <ConfigProvider
            theme={{
                algorithm: themeAlgorithm,
                components: {
                    Button: radiusProps,
                    Input: radiusProps,
                    Select: radiusProps,
                    Card: radiusProps,
                    Modal: radiusProps,
                    Table: radiusProps
                }
            }}
            locale={locale}
        >
            <AntdApp>
                <RootContextApi.Provider setTheme={setTheme}>
                    <RootApplication.AppProvider >
                        <AppView.App i18n={i18nData} router="Browser" >
                            <AppView.RouterWrapper namespace='home' />
                        </AppView.App>
                    </RootApplication.AppProvider>
                </RootContextApi.Provider>
            </AntdApp>
        </ConfigProvider>
    );
}

export default App;
